<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生考勤系统</title>
<style type="text/css">
	* {margin: 0; padding: 0;}
	body{
		background-color: #e2e2e2;
		font-size: 14px;
	}
	.top{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 50px;
		background-color: #bababa;
	}
	.top .userMenu{
		position: absolute;
		right: 60px;
		top: 29px;
		width: 130px;
		z-index: 2;
	}
	.top .userMenu .user{
		display: inline-block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #f0f0f0;
		cursor: pointer;

	}
	.top .userMenu ul{
		background-color: white;
		margin-top: 0;
	}
	ul li {
		list-style-type: none;
		position: relative;
		overflow: hidden;
	}
	ul li:hover {
		background-color: hsla(180, 39%, 80%, 0.6);
	}
	ul li a {
		color: hsl(180, 40%, 40%);
		display: block;
		padding: 10px 15px;
		text-decoration: none;
		cursor: pointer;
		border-bottom: 1px solid rgba(204, 204, 204, 0.24);
	}
	.top .loginOut{
		position: absolute;
		right: 10px;
		bottom: 2px;
		color: #3d8f8f;
		cursor: pointer;
	}
	.top .loginOut:hover{
		color: white;
	}
	.left ul {
		position: absolute;
		top: 60px;
		left: 0;
		bottom: 60px;
		background: white;
		width: 200px;
	}
	.contend {
		position: absolute;
		top: 60px;
		left: 210px;
		right: 0;
		bottom: 60px;
		background-color: white;
	 }
	.change{
		background-color: hsl(180, 40%, 80%);
	}
	.bottom{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		line-height: 50px;
		background-color: #74777b;
	}
</style>
<script type="text/javascript">
	function change(page) {
		$('#iframe').attr("src", page + ".do");
	}
    function changeUser(page) {
        $('#iframe').attr("src", "user/" + page + ".do");
    }
    function exit(){
    	var con;
    	con=confirm("确定要退出吗?"); //在页面上弹出对话框
    	if(con==true){
    		sessionStorage.removeItem("user");
    		window.location.href='login.do';
    	}
    }
</script>
</head>
<body>
<%
  boolean isJob = (boolean)request.getAttribute("job");
%>


<div  <c:if test="<%=!isJob%>">style="display:none"</c:if>>
	<div class="top">
		<div class="userMenu">
		<span class="user" title="欢迎">欢迎： ${stu.name}</span>
			<%-- <span class="user" title="欢迎">
			欢迎:${stu.name}
	    </span> --%>
		<ul>
			<li onclick="changeUser('personalCenter')"><a>个人中心</a></li>
			<li onclick="change('changePassword')"><a>修改密码</a></li>
			</ul>
		</div>
		<span class="loginOut" onclick="exit()">
			退出
		</span>
	</div>
	<div class="left">
		<ul>
		<li onclick="change('index')" class="change"><a>首页</a></li>
		<li onclick="change('leave')" class="change"><a>我要请假</a></li>
		<li onclick="change('myStudent')" class="change"><a>我的同学</a></li>
		<li onclick="change('myTeacher')" class="change"><a>我的老师</a></li>
		</ul>
	</div>
</div>
<div  <c:if test="<%=isJob%>">style="display:none"</c:if>>
	<div class="top">
		<div class="userMenu">
		<span class="user" title="欢迎">欢迎： ${stu.name}</span>
		<%-- 	<span class="user">欢迎： ${stu.name}</span> --%>
		<ul>
			<li onclick="changeUser('personalCenter')"><a>个人中心</a></li>
			<li onclick="change('changePassword2')"><a>修改密码</a></li>
			</ul>
		</div>
		<span class="loginOut" onclick="exit()">
			退出
		</span>
	</div>
	<div class="left">
		<ul>
		<li onclick="change('index')" class="change"><a>首页</a></li>
		<li onclick="change('leave2')" class="change"><a>请假单列表</a></li>
		<li onclick="change('myClass')" class="change"><a>学生请假列表</a></li>
		<li onclick="change('myStudent1')" class="change"><a>考勤管理</a></li>
		<li onclick="change('attend')" class="change"><a>考勤列表</a></li>
		</ul>
	</div>
</div>
	<div class="contend">
		<iframe id="iframe" frameborder=0 width="100%" height="100%" src="index.do" ></iframe>
	</div>
	<div class="bottom">
		网站底部
	</div>


<script  type="text/javascript" src="${pluginPath}/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(".top .userMenu ul").hide();
    $(".left ul li").each(function (index) {
        $(this).click(function () {
            $(".userMenu ul li").removeClass("change");
            $(".left ul li").removeClass("change");
            $(".left ul li:eq(" + index + ")").addClass("change");
        })
    });
    $(".userMenu ul li").each(function (index) {
        $(this).click(function () {
            $(".left ul li").removeClass("change");
            $(".userMenu ul li").removeClass("change");
            $(".userMenu ul li:eq(" + index + ")").addClass("change");
        })
    });
    $(".top .userMenu").hover(function () {
        $(".top .userMenu ul").show();
    },function (){
        $(".top .userMenu ul").hide();
    })
</script>

</body>
</html>